<template>
	<view class="xiangqing-box">
		<view class="xiangqing-box-content">
			<view class="xiangqing-top">
				<view class="xiangqing-top-img">
					<image src="../../static/touxiang@2x.png" mode="widthFix"></image>
				</view>
				<view class="xiangqing-top-name">
					<view class="xiangqing-name biaoti1">
						{{name}}
					</view>
					<view class="xiangqing-xuehao zhengwen1">
						学号:{{ sno }}
					</view>
				</view>
			</view>
			<!-- <view class="xiangqing-number">
				<view class="shouji zhengwen1">
					手机号:{{tel}}
				</view>
				<view class="zhuanye zhengwen1" style="white-space: nowrap;">
					专业班级:{{className}}
				</view>
			</view>
			<view class="shenfenzheng zhengwen1">
				身份证号:{{idcard}}
			</view> -->
			<view class="shenfenzheng zhengwen1">
				专业班级:{{className}}
			</view>
			
			<view class="leave_title">
				请假统计
			</view>
			<view class="tongji-info" v-for="(iterm,index) in studentsYearMsgBos" :key="index">
				<view class="info-top">
					<view class="nianfen tableHeader">
						年份
					</view>
					<view class="info-top-right">
						<view class="riqi tableHeader">
							起止日期
						</view>
						<view class="liyou tableHeader">
							请假理由
						</view>
						<view class="info-shichang tableHeader">
							时长
						</view>
					</view>
				</view>
				<view class="info-center zhengwen2">
					<view class="info-center-left">
						{{iterm.year}}年
					</view>
					<view class="info-center-right">
						<view class="info-center-right-n"  v-for="(itermm,indexx) in iterm.studentsFlyMsgBos" :key="indexx">
							<view class="qizhi">
								{{itermm.monthDay}}至{{itermm.endTimeMonthDay}}
							</view>
							<view class="info-center-right-liyou">
								{{itermm.reason}}
							</view>
							<view class="info-center-right-shichang">
								{{itermm.hours}}小时
							</view>
						</view>
					</view>
				</view>
				<view class="info-bottom">
						合计: {{iterm.yearSum}}小时
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sno:'',
				name:'',
				photo:'',
				tel:'',
				className:'',
				idcard:'',
				studentsYearMsgBos:[]
			}
		},
		methods: {
			reloadRequest(val) {
				let _this = this;
				//提交数据请求接口
				uni.request({
					url: this.baseUrl + "/secretary/sum/searchStudentsDetail?satoken="+uni.getStorageSync('satoken'),
					data: {
						studentId: val,
					},
					withCredentials: true,
					headers: {
						//"content-type": "application/x-www-form-urlencoded",
						// token: localStorage.getItem('token')
					},
					success: res => { 
						console.log(res.data.data);
						let msg=res.data.data
						_this.sno=msg.sno
						_this.name=msg.name
						_this.tel=msg.tel
						_this.photo=msg.photo
						_this.className=msg.className
						_this.idcard=msg.idcard
						_this.studentsYearMsgBos=msg.studentsYearMsgBos
						
						//this.stuList=res.data.data.records
					}
				}); 
			},
			
		},
		onLoad(options) {
			this.sno = options.sno
			this.reloadRequest(this.sno);
		}
	}
</script>

<style lang="scss">
	.tableHeader{
		font-size: 30rpx;
		color: #ffffff;
		background-color: #77312a;
	}
	.zhengwen1{
		font-size: 26rpx;
		color: #707070;
	}
	
	.xiangqing-box{
		width: 100%;
		box-sizing: border-box;
		overflow: hidden;
		padding-bottom: 40rpx;
		.xiangqing-box-content{
			width: 95%;
			margin: 0 auto;
			box-sizing: border-box;
			overflow: hidden;
			padding-top: 20rpx;
			.xiangqing-top{
				width: 100%;
				box-sizing: border-box;
				overflow: hidden;
				display: flex;
				flex-direction: row;
				.xiangqing-top-img{
					flex: 2;
					image{
						width: 100%;
					}
				}
				.xiangqing-top-name{
					padding-left: 20rpx;
					flex: 5;
					display: flex;
					flex-direction: column;
					justify-content: center;
					// padding-left: 20rpx;
					margin-left: 20rpx;
					.xiangqing-xuehao{
						margin-top: 20rpx;
					}
				}
			}
			.xiangqing-number{
				width: 100%;
				box-sizing: border-box;
				overflow: hidden;
				display: flex;
				flex-direction: row;
				margin-top: 20rpx;
				view{
					flex: 1;
				}
			}
			.shenfenzheng{
				width: 100%;
				box-sizing: border-box;
				overflow: hidden;
				margin-top: 10rpx;
			}
			.xiangqing-biaoti{
				margin-top: 50rpx;
			}
			.tongji-info{
				width: 100%;
				box-sizing: border-box;
				overflow: hidden;
				margin-top: 20rpx;
				display: flex;
				flex-direction: column;
				.info-top{
					width: 100%;
					box-sizing: border-box;
					overflow: hidden;
					display: flex;
					flex-direction: row;
					view{
						display: flex;
						align-items: center;
						justify-content: center;
						// border: 1px solid #999999;
						// padding: 10rpx;
					}
					.nianfen{
						flex: 2;
						border: 1px solid #77312a;
						border-right: none;
					}
					.info-top-right{
						flex: 13;
						// border: 1px solid #999999;
						.riqi{
							border: 1px solid #77312a;
							flex: 3;
							border-right: none;
						}
						.liyou{
							border: 1px solid #77312a;
							flex: 6;
							border-right: none;
						}
						.info-shichang{
							border: 1px solid #77312a;
							flex: 2;
						}
					}
				}
				.info-center{
					font-size: 10rpx;
					
					width: 100%;
					box-sizing: border-box;
					overflow: hidden;
					display: flex;
					flex-direction: row;
					view{
						// padding: 10rpx;
						box-sizing: border-box;
					}
					.info-center-left{
						box-sizing: border-box;
						flex: 2;
						display: flex;
						justify-content: center;
						flex-direction: column;
						align-items: center;
						border: 1px solid #999999;
						border-right: none;
						border-top: none;
						// padding: 10rpx;
					}
					.info-center-right{
						flex: 13;
						display: flex;
						flex-direction: column;
						box-sizing: border-box;
						overflow: hidden;
						.info-center-right-n{
							width: 100%;
							display: flex;
							box-sizing: border-box;
							overflow: hidden;
							flex-direction: row;
							view{
								border: 1px solid #999999;
								box-sizing: border-box;
								padding: 10rpx 0;
								display: flex;
								align-items: center;
								
							}
							.qizhi{
								flex: 3;
								// border-right: none;
								border-top: none;
								flex-direction: column;
							}
							.info-center-right-liyou{
								flex: 6;
								border-left: none;
								border-top: none;
								border-right: none;
								flex-direction: column;
								
								verflow: hidden;
								word-break: break-all; /* break-all(允许在单词内换行 */
								text-overflow: ellipsis; /* 超出部分省略号 */
								-webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */
								-webkit-line-clamp: 4; /* 显示的行数 */
								lines:4;/* NVUE下要用这个，让文字超出固定行数隐藏变省略号 */
								
							}
								
							.info-center-right-shichang{
								flex: 2;
								border-top: none;
								flex-direction: column;
							}
						}
					}
				}
				.info-bottom{
					width: 100%;
					box-sizing: border-box;
					overflow: hidden;
					display: flex;
					flex-direction: row;
					border: 1rpx solid #999999;
					border-top: none;
					align-items: center;
					justify-content: center;
					padding: 20rpx;
					color: #77312A;
				}
			}
		}
	}
	.leave_title{
		width: 100%;
		height: 40rpx;
		line-height: 40rpx;
		border-left: 10rpx solid #77312A;
		color: #77312A;
		margin: 40rpx 30rpx 20rpx 0rpx;
		padding-left: 20rpx;
		font-size: 40rpx;
		font-weight: 500;
	}

</style>
